<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link rel="stylesheet" href="plugin/ztree/css/demo.css" type="text/css">
		<link rel="stylesheet" href="plugin/ztree/css/zTreeStyle.css" type="text/css">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/ztree/js/jquery.ztree.core.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			#bannerImg,#classificationImg{display: none;}
		</style>
	</head>

	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>商品管理</li>
				  <li class="active">商品分类管理</li>
				</ol>
				<div class="btn-group" role="group" aria-label="...">
				  	<button type="button" class="btn btn-primary btn-success ztreeAdd" data-toggle="modal">新增</button>
					<button type="button" class="btn btn-primary btn-default ztreeEditor" data-toggle="modal">编辑</button>
				  	<button type="button" class="btn btn-primary btn-danger ztreeDelete">删除</button>
				</div>
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="modal fade" tabindex="-1" role="dialog" id="gridSystemModal" aria-labelledby="gridSystemModalLabel">
	    <div class="modal-dialog" role="document">
	        <div class="modal-content ztreeIpt">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
	                </button>
	                 <h4 class="modal-title" id="gridSystemModalLabel">查看</h4>
	            </div>
	            <div class="modal-body">
					<div class="form-group">
						<label class="col-sm-2 control-label goods-lb-l">分类名</label>
						<div class="col-sm-10 goods-lb-r">
							<input type="text" class="form-control" id="gcName" placeholder="分类名">
						</div>
					</div>
					<div class="form-group" id="bannerImg">
						<label class="col-sm-2 control-label goods-lb-l">广告图片</label>
						<div class="col-sm-10 goods-lb-r">
							<form id="addB" enctype="multipart/form-data">
								<input type="file" multiple="" onchange="imgup(this,$('#addB'))" class="form-control"  name="file" placeholder="广告图片">
								<input type="hidden" name="imgPath" value="articles">

								<p>图片尺寸：530*180</p>
								<div class="addB">
									<img class="" id="gcAdImageBox" style="width:140px;" src="" alt="">
								</div>
								<input type="hidden" name="" id="gcAdImage" value="">
							</form>
						</div>
					</div>
					<div class="form-group"  id="classificationImg">
						<label class="col-sm-2 control-label goods-lb-l">分类图片</label>
						<div class="col-sm-10 goods-lb-r">
							<form id="addF" enctype="multipart/form-data">
								<input type="file" multiple="" onchange="imgup(this,$('#addF'))" class="form-control" name="file" placeholder="分类图片">
								<input type="hidden" name="imgPath" value="articles">

								<p>图片尺寸：200*200</p>
								<div class="addF">
									<img class="" id="gcImageBox" style="width:140px;" src="" alt="">
								</div>
							</form>
							<input type="hidden" name="" id="gcImage" value="">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label goods-lb-l">排序</label>
						<div class="col-sm-10 goods-lb-r">
							<input type="text" class="form-control" id="gcSort" placeholder="排序">
						</div>
					</div>
	            </div>
				<!--待审核-->
	            <div class="modal-footer pendingApproval">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" id="ztreeBtn">提交</button>
	            </div>
	        </div>
		        <!-- /.modal-content -->
	    </div>
	    <!-- /.modal-dialog -->
	</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
	// nultiple initialize
	$('.input04').filestyle({
		htmlIcon : '<span class="oi oi-folder"></span> ',
		text: '预览',
		btnClass : 'btn-primary'
	});
	$(document).ready(function() {
		ztreeDate ()
	});
	//ztree zNodes
	var zNodes;

	//ztree节点id
	var dataId = 0;

	//ztree父级id
	var gcParentId = ''

	//ztree等级id
	var levelId = '';

	//ztree编辑修改url
	var ztreeDateUrl;

	var goodsData = '';

	//ztree
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},callback: {
			onClick: onClick
		}
	};

	//ztree树data
	function ztreeDate (){
		ajax(
			serverURL +'/platform/queryGoodsClass',
			null,
			ztreeCb,
			'post',
			'json'
		)
	}

	//ztree树data回调
	ztreeCb = function(res){
		console.log(res)
		zNodes = res.data;
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	}

	//点击回调
	function onClick(event, treeId, treeNode,clickFlag) {
		dataId = treeNode.gcId;
		gcParentId = treeNode.gcParentId;
		levelId = treeNode.level;
		console.log(dataId,levelId)
	};

	//图片上传
	function imgup(upImg,ADD) {
		var datas = new FormData(ADD[0]);
		var size = upImg.files[0].size;//得到图片的大小
		var trueSize = Math.ceil(size/1024);//把字节转换成kb
		if (trueSize > 2048) {
			alert("请上传小于2M的图片")
			return false;
		}
		var fileImg = upImg.files[0].name;            //图片名
		var extStart=fileImg.lastIndexOf(".");
		var ext=fileImg.substring(extStart,fileImg.length).toUpperCase();
		if (ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG") {
			alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
			return false;
		};
		$.ajax({
		 url: serverURL +'/platform/getOssUpload',
		 type: "post",
		 dataType: "json",
		 cache: false,
		 contentType: false,
		 processData: false,
		 data:datas,
		 xhrFields: {
		 	withCredentials: true
	 	},
		beforeSend:function () {
			$('#ztreeBtn').attr("disabled",true);
		},
	 	success: function (data) {
		 	if (data.code == 200) {
				// 	var srcs = getObjectURL(upImg.files[0]);
				// $(upImg).val(data.data)
				$('#ztreeBtn').attr("disabled",false);
				var src = data.data
				$(upImg).next().val(src)
				$('#gcAdImage').val(src)
				$('#gcImage').val(src)
				$(upImg).siblings('div').children('img').attr('src',src)
				$('#gcAdImageBox').addClass('img-thumbnail')
				$('#gcImageBox').addClass('img-thumbnail')
		 	}else{
				$('#ztreeBtn').attr("disabled",false);
			}
		}
	 });
	 return false
	}

	//添加
	$('.ztreeAdd').click(function(){
		goodsData = '1'
		if (dataId == '0') {
			$('#bannerImg').show()
		}
		if (levelId == '2') {
			$('#classificationImg').show()
		}
		if (levelId == '3') {
			// $('#gridSystemModal').hide();
			return false;
		}
		$('#gridSystemModal').modal()
		ztreeDateUrl = serverURL +'/platform/addGoodsClass';
	})


	//修改添加
	$('#ztreeBtn').click(function(){
		console.log(dataId,levelId)
		var data;
		if(goodsData == '1'){
			data = {
				'parentId':dataId,
				'levelId':levelId,
				'gcName':$('#gcName').val(),
				'gcAdImage':$('#gcAdImage').val(),
				'gcImage':$('#gcImage').val(),
				'gcSort':$('#gcSort').val(),
			}
		}else{
			data = {
				'gcId':dataId,
				'levelId':levelId,
				'gcName':$('#gcName').val(),
				'gcAdImage':$('#gcAdImage').val(),
				'gcImage':$('#gcImage').val(),
				'gcSort':$('#gcSort').val(),
			}
		}
		// console.log(data);
		console.log(data);
		var cbk = function(res){
			layer.msg(res.msg)
			ztreeDate ()
			$('#gridSystemModal').modal('hide')
			//ztree节点id
			dataId = 0
			//ztree等级id
			levelId = ''
			//父级id
			gcParentId = ''
		}
		ajax(
			ztreeDateUrl,
			data,
			cbk,
			'post',
			'json'
		)
	})

	//详情
	$('.ztreeEditor').click(function(){
		goodsData = '2'
		if (dataId == 0) {
			layer.msg('请选择一个分类')
			return false;
		}else{
			if (levelId == '1') {
				$('#bannerImg').show()
			}else if (levelId == '3') {
				$('#classificationImg').show()
			}
			ztreeDateUrl = serverURL +'/platform/updateGoodsClass';
			console.log(dataId,levelId)
			var data = {
				'gcId':dataId,
			}
			var cbk = function(res){
				layer.msg(res.msg)
				console.log(res)
				$('#gridSystemModal').modal();
				if (levelId == '1') {
					$('#gcAdImage').val(res.data.gcAdImage)
					$('#gcAdImageBox').attr('src',res.data.gcAdImage)
					$('#gcAdImageBox').addClass('img-thumbnail')
				}else if (levelId == '3') {
					$('#gcImage').val(res.data.gcImage)
					$('#gcImageBox').attr('src',res.data.gcImage)
					$('#gcImageBox').addClass('img-thumbnail')
				}
				$('#gcName').val(res.data.gcName);
				$('#gcSort').val(res.data.gcSort);
				// layer.ready(function(){ //为了layer.ext.js加载完毕再执行
				// 	layer.photos({
				// 	  photos: '.addB'
				// 	  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
				// 	  ,start: 0
				// 	});
                //   });
				//   layer.ready(function(){ //为了layer.ext.js加载完毕再执行
				// 	  layer.photos({
	  	// 			  photos: '.addF'
	  	// 			  ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
	  	// 			  ,start: 0
	  	// 			});
                //     });
			}
			ajax(
				serverURL +'/platform/queryGoodsClassById',
				data,
				cbk,
				'post',
				'json'
			)
		}
	})

	//删除节点
	$('.ztreeDelete').click(function(){
		if (dataId == '0') {
			return false;
		}else {
			var cbk = function (res){
				layer.msg(res.msg)
				ztreeDate ()
				$('#gridSystemModal').modal('hide')
				//ztree节点id
				dataId = 0
				//ztree等级id
				levelId = ''
			}
			var data = {
				'gcId':dataId,
				'level':levelId
			}
			layer.confirm('确定要删除这条分类吗？', {
	              btn: ['确定','取消'] //按钮
	            }, function(){
					ajax(
						serverURL +'/platform/deleteGoodsClass',
						data,
						cbk,
						'post',
						'json'
					)
	            },function(){
	            });
		}
	})
	//数据清空
	$('#gridSystemModal').on('hidden.bs.modal', function (e) {
		$('.ztreeIpt input').val(null);
		$("input[name='imgPath']").val('articles')
		$('#gcAdImageBox').attr('src','')
		$('#gcImageBox').attr('src','')
		$('#gcAdImageBox').removeClass('img-thumbnail')
		$('#gcImageBox').removeClass('img-thumbnail')
		$('#bannerImg').hide()
		$('#classificationImg').hide()
	})
</script>
